<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../../src/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			111
			<picker v-model="time"></picker>
			<currency-input v-model="price"></currency-input>
		</div>
		<script type="text/x-tempalte" id="picker">
			<div class="calendar">
				<span>
				      <input
				        ref="input"
				        v-bind:value="value"
				        v-on:input="updateValue($event.target.value)"
				      >
				    </span>
				<div class="month">
					<ul>
						<li class="arrow cursor" @click="pickPre(currentYear,currentMonth)">❮</li>
						<li class="year-month" @click="pickYear(currentYear,currentMonth)">
							<span class="choose-year">{{ currentYear }}</span>
							<span class="choose-month">{{ currentMonth }}月</span>
						</li>
						<li class="arrow cursor" @click="pickNext(currentYear,currentMonth)">❯</li>
					</ul>
				</div>
				<ul class="weekdays">
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li style="color:red">六</li>
					<li style="color:red">日</li>
				</ul>
				<ul class="days">
					<li @click="pick(day,$event)" v-for="day in days">
						<!--今天-->
						<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
						<span v-else>
					    <!--今天-->
					    <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
						<span v-else>{{ day.getDate() }}</span>
						</span>
					</li>
				</ul>
			</div>
		</script>
		<script type="text/javascript">
			Vue.component('picker', {
				template:'#picker',
				data: function(){
					return {
						currentDay: 1,
						currentMonth: 1,
						currentYear: 1970,
						currentWeek: 1,
						days: [],
					}
				},
				props: ['value'],
				created: function() {
//					this.initData(null);
//					console.log(this.time)
					console.log(this.value)
				},
				methods: {
					initData: function(cur) {
						var date;
						if(cur) {
							date = new Date(cur);
						} else {
							date = new Date();
						}
						this.currentDay = date.getDate();
						this.currentYear = date.getFullYear();
						this.currentMonth = date.getMonth() + 1;
						this.currentWeek = date.getDay(); // 1...6,0
						if(this.currentWeek == 0) {
							this.currentWeek = 7;
						}
						var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
						console.log("today:" + str + "," + this.currentWeek);
						this.days.length = 0;
						// 今天是周日，放在第一行第7个位置，前面6个
						for(var i = this.currentWeek - 1; i >= 0; i--) {
							var d = new Date(str);
							d.setDate(d.getDate() - i);
							console.log("y:" + d.getDate());
							this.days.push(d);
						}
						for(var i = 1; i <= 35 - this.currentWeek; i++) {
							var d = new Date(str);
							d.setDate(d.getDate() + i);
							this.days.push(d);
						}
					},
					pick: function(date,ev) {
						console.log(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
						console.log(ev.target)
//						alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
					},
					pickPre: function(year, month) {
						// setDate(0); 上月最后一天
						// setDate(-1); 上月倒数第二天
						// setDate(dx) 参数dx为 上月最后一天的前后dx天
						var d = new Date(this.formatDate(year, month, 1));
						d.setDate(0);
						this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
					},
					pickNext: function(year, month) {
						var d = new Date(this.formatDate(year, month, 1));
						d.setDate(35);
						this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
					},
					pickYear: function(year, month) {
						alert(year + "," + month);
					},

					// 返回 类似 2016-01-02 格式的字符串
					formatDate: function(year, month, day) {
						var y = year;
						var m = month;
						if(m < 10) m = "0" + m;
						var d = day;
						if(d < 10) d = "0" + d;
						return y + "-" + m + "-" + d
					},
				},
			});
			Vue.component('currency-input', {
				template: '\
				    <span>\
				      $\
				      <input\
				        ref="input"\
				        v-bind:value="value"\
				        v-on:input="updateValue($event.target.value)"\
				      >\
				    </span>\
				  ',
				props: ['value'],
				mounted:function(){
					console.log(this.value)
				},
				methods: {
					// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
					updateValue: function(value) {
						var formattedValue = value
							// 删除两侧的空格符
							.trim()
							// 保留 2 小数位
							.slice(
								0,
								value.indexOf('.') === -1 ?
								value.length :
								value.indexOf('.') + 3
							)
						// 如果值不统一，手动覆盖以保持一致
						if(formattedValue !== value) {
							this.$refs.input.value = formattedValue
						}
						// 通过 input 事件发出数值
						this.$emit('input', Number(formattedValue))
					}
				}
			})
			new Vue({
				el: '#app',
				data: {
					time:'11',
					price: 10,
				},
				computed: {
					total: function() {
						return	this.price * 100 ;
					}
				}
			})
		</script>
	</body>

</html>